/**
 * System notes on main activity feed
*/

// Gradient only appears on specific system notes (merge, closed, etc)
@mixin activity-line-gradient($color-1, $color-2) {
  content: '';
  display: block;
  position: absolute;
  left: calc(50% - 1px);
  width: 2px;
  height: 20px;
  background: linear-gradient(to bottom, $color-1, $color-2);
}

.system-note {
  .note-body:has(.note-text p:first-child:last-child) {
    display: none;
  }

  .note-text {
    // System notes render the text twice; this hides the second one. Do not remove!
    p:first-child {
      display: none;
    }

    ul {
      margin: $gl-spacing-scale-2 0;
    }
  }

  .note-body {
    p {
      margin-left: $gl-spacing-scale-5;
    }
  }

  .system-note-message {
    a {
      @apply gl-text-link;
    }

    .gfm-project_member {
      color: var(--gl-link-mention-text-color-default);

      &.current-user {
        color: var(--gl-link-mention-text-color-current);
      }
    }
  }
}

.system-note-dot {
  background-color: var(--gl-status-neutral-icon-color);
}

// Vertical line gradient for specific system note icons
.system-note-icon {
  color: var(--system-note-icon-color);
  background-color: var(--system-note-icon-background-color);

  &.system-note-icon-success {
    --system-note-icon-color: var(--gl-status-success-icon-color);
    --system-note-icon-background-color: var(--gl-status-success-background-color);
  }

  &.system-note-icon-danger {
    --system-note-icon-color: var(--gl-status-danger-icon-color);
    --system-note-icon-background-color: var(--gl-status-danger-background-color);
  }

  &.system-note-icon-info {
    --system-note-icon-color: var(--gl-status-info-icon-color);
    --system-note-icon-background-color: var(--gl-status-info-background-color);
  }

  &.system-note-icon-warning {
    --system-note-icon-color: var(--gl-status-warning-icon-color);
    --system-note-icon-background-color: var(--gl-status-warning-background-color);
  }

  &:not(.mr-system-note-empty) {
    &::before {
      @include activity-line-gradient(transparent, var(--system-note-icon-background-color));
      bottom: 100%;
    }

    &::after {
      @include activity-line-gradient(var(--system-note-icon-background-color), transparent);
      top: 100%;
    }
  }
}

// Remove beginning/end of system note gradient activity line
.system-note {
  &:first-of-type {
    .system-note-icon::before {
      @include activity-line-gradient(transparent, transparent);
    }
  }

  &:last-of-type {
    .system-note-icon::after {
      @include activity-line-gradient(transparent, transparent);
    }
  }
}


.system-note:first-child :is(.system-note-icon::before, .system-note-icon::after) {
  display: none;
}

// Scrim appears when there are many commits
.system-note-commit-list {
  max-height: 70px;

  &::after {
    content: '';
    height: 70px;
    position: absolute;
    left: $gl-spacing-scale-2;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, transparent -50px, var(--gl-background-color-default) 100%);
  }
}

// System notes on diffs
.card .notes {
  .system-note {
    margin: 0;
    padding: 0;
  }

  .system-note-dot {
    margin-top: .875rem; // Fixed value to correctly align
    margin-left: $gl-spacing-scale-5;
  }
}

// Legacy system notes (commits and snippets)
.system-note-legacy {
  .note-headline-light p {
    margin-bottom: 0;
  }
}

.duo-code-review-system-note p {
  display: inline;
}
